<template>
           <el-card class="box-card" v-if="!render">
             <template #header>
               <div class="card-header mtb20" >
                 <span class="title">添加密文-{{state.secretsType}}</span>
                 <el-button type="primary" size="small" class="leftBtn"  @click="addItem" >添加密文</el-button>
               </div>
             </template>
             <el-form   :model="state.form" ref="formRef"  >
             <div v-for="(item,index) in state.form" :key="secretsType+'secrets'+index" class="mtb20">
                 <el-form-item
                     label="密文名称"
                     :key="secretsType+'secrets'+index+'name'"
                     :prop="'secrets.'+index+'.name'"
                 >
                   <el-select  size="small" v-model="item.name"  filterable>
                     <el-option :key="key" v-for="(item,key) in secretCheck" :label="item" :value="item"/>
                   </el-select>
                 </el-form-item>
                 <el-form-item  >
                   <el-button size="small" type="danger" @click="removeItem(index)" >删除该项items</el-button>
                 </el-form-item>
             </div>
             </el-form>
           </el-card>
          <div  v-if="render&&state.form?.length">
            <el-descriptions
                class="smallTable"

                :column="1"
                :title="state.secretsType"
            >
              <el-descriptions-item v-for="item in state.form" :label="tipTitle+':密文名称'">
                {{item.name}}
                <a  @click="()=>doTo('secret-detail',{namespace:state.namespace,name:item.name})">查看密文详情</a>
              </el-descriptions-item>
            </el-descriptions>
            <el-divider></el-divider>
          </div>

</template>


<script lang="ts" setup>
import {computed, defineComponent, inject, reactive, ref, toRefs, watch} from 'vue'
import {IsDirty} from "../../../helper/helper";
import {requireRules, NameToArr, inArrayWithMsg, NameToArrWithKey} from "../../../helper/rules";
import {secretAllByNs} from "../../../api/token/secret/secret";
import {doTo} from "../../../router";
const render = inject("render")
const props = defineProps(['tipTitle',"namespace","secretsType"])

let state=reactive({
  secretList:[],
  tipTitle:props.tipTitle,
  form: [],
  md5:"",
  namespace:"default",
  secretsType:props.secretsType,
  render:render
})
let formRef=ref(null)
const emit = defineEmits(['input'])

function commit(){
  emit("input",state.form)
}
async function  fetchData(){
  let secret=await  secretAllByNs(state.namespace)
  state.form=[]
  state.secretList=secret.data.data.filter(item=>{
    if(state.tipTitle=='secrets'){

      if (item.type=="服务账号令牌"){
        return true
      }else{
        return  false
      }
    }
    if(state.tipTitle=='imagePullSecrets'){
      if (item.type=="docker配置"||item.type=="docker配置(JSON)"){
        return true
      }else{
        return  false
      }
    }
  })
}
watch(()=>props.namespace,async ()=>{
if (!props.namespace){
  return
}
  state.namespace=props.namespace
  await fetchData()
},{deep:true,flush:"post"})
fetchData()
watch(()=>state.form,()=>{
  if(!IsDirty(state)){
    commit()
    return
  }

},{deep:true,flush:"post"})



function Check(){
  return formRef.value.validate()
}
function removeItem(index) {
  state.form.splice(index,1)
}
function addItem() {
  if( state.form.length>0){
    state.form.push({name:""})
  }else{
    state.form=[{name:""}]
  }

}
let secretCheck=computed(()=> {
  return NameToArrWithKey(state.secretList,"Secret")
})
function setData(data){
  if (data){
    state.form=data
  }
}
defineExpose({ setData,Check })
</script>

<style scoped>

</style>